<template>
  <div class="main">
    <div class="inputs">
      <el-form ref="Form" label-width="110px">
        <div class="row">
          <el-form-item label="线路编号:">
            <el-input v-model="pageParams.number" style="width: 350px;" placeholder="请输入线路编号" />
          </el-form-item>
          <el-form-item label="线路名称:">
            <el-input v-model="pageParams.name" style="width: 350px;" placeholder="请输入线路名称" />
          </el-form-item>
          <el-form-item label="起始机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
            <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select" style="width: 350px;" placeholder="请选择起始机构">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="row" style="justify-content: start;">
          <el-form-item label="目的地机构:">
            <!-- <el-input style="width: 350px;" /> -->
            <el-select ref="destination" v-model="destination " class="main-select-tree select" style="width: 350px;" placeholder="请选择目的地机构">
              <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value1" style="display: none;" />
              <el-tree
                ref="selecteltree"
                class="main-select-el-tree"
                :data="treeData"
                node-key="id"
                highlight-current
                :props="{label:'name',children:'children'}"
                :expand-on-click-node="false"
                @node-click="hasValue1"
              />
            </el-select>
          </el-form-item>
          <div class="btn">
            <el-button type="danger" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="table">
      <div class="tableBtn" style="margin: 5px 0 25px;">
        <el-button type="danger" @click="editShow=true">新增线路</el-button>
        <el-button type="danger">成本设置</el-button>
        <el-button type="danger">调度配置</el-button>
      </div>
      <div class="bader">
        <el-table :header-cell-style="{background:'#f8faff'}" :data="tableData" stripe>
          <el-table-column type="expand" width="40px">
            <template>
              <div class="bader">
                <el-table :header-cell-style="{background:'#f8faff'}" stripe>
                  <el-table-column label="车次名称" />
                  <el-table-column label="发车频次" />
                  <el-table-column label="到达时间" />
                  <el-table-column label="车辆安排" />
                  <el-table-column label="司机安排" />
                  <el-table-column label="操作" />
                  <template #empty>
                    <div>
                      <img class="nullImg" :src="imgUrl" alt="">
                      <span class="nullText">{{ isSearch?'这里空空如也':'没有找到您要的内容哦~' }}</span>
                    </div>
                  </template>
                </el-table>
              </div>

            </template>
          </el-table-column>
          <el-table-column
            label="线路编号"
            prop="number"
          />
          <el-table-column
            label="线路名称"
            prop="name"
          />
          <el-table-column
            label="线路类型"
          >
            <template v-slot="{row}">
              <span v-if="row.type==1">干线</span>
              <span v-else-if="row.type==2">支线</span>
              <span v-else-if="row.type==3">接驳路线</span>
            </template>
          </el-table-column>

          <el-table-column
            label="起始地机构"
            prop="startOrganName"
          />
          <el-table-column
            label="目的地机构"
            prop="endOrganName"
          />
          <el-table-column
            label="距离（千米）"
            prop="distance"
          />
          <el-table-column
            label="成本（元）"
            prop="cost"
          />
          <el-table-column
            label="预计时间（分钟）"
            prop="time"
          />
          <el-table-column
            label="操作"
            width="160"
            fixed="right"
          >
            <template>
              <el-button type="text" style="color: #69c4fc;">修改</el-button>
              <el-button type="text">删除</el-button>
              <el-button type="text" style="color: #69c4fc;">增加车次</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <div>
              <img class="nullImg" :src="imgUrl" alt="">
              <span class="nullText">{{ isSearch?'这里空空如也':'没有找到您要的内容哦~' }}</span>
            </div>
          </template>
        </el-table>
      </div>
      <div v-if="total" class="page">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
    <div class="bdrd">
      <el-dialog title="新增路线" :visible.sync="editShow" width="30%">
        <el-form ref="Form" label-width="100px" :model="editForm">
          <el-form-item label="线路编号：">
            <el-input v-model="editForm.a" placeholder="请输入线路名称" />
          </el-form-item>
          <el-form-item label="线路名称：">
            <el-input v-model="editForm.b" placeholder="请输入线路名称" />
          </el-form-item>
          <el-form-item label="线路类型">
            <el-select v-model="editForm.c" placeholder="请选择线路类型" change="changeAA" style="width: 100%;">
              <el-option
                v-for="item in carNamber"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="起始地机构">
            <el-select v-model="editForm.d" placeholder="请选择起始机构" change="changeAA" style="width: 100%;">
              <el-option
                v-for="item in car"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目的地机构">
            <el-select v-model="editForm.e" placeholder="请选择目的地机构" style="width: 100%;">
              <el-option
                v-for="item in eddAddreze"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;justify-content: center;">
            <el-button type="primary" style="margin-right: 20px;" @click="$message.error('很抱歉，演示数据不能修改！')">确定</el-button>
            <el-button @click="editShow=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getLinePage } from '@/api/line'
import { getTree } from '@/api/selectTree'

export default {
  data() {
    return {
      editForm: {
        a: '',
        b: ''
      },
      car: [],
      carNamber: [],
      eddAddreze: [],
      editShow: false,
      tableData: [],
      total: 1,
      isSearch: true,
      imgUrl: 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png',
      pageParams: {
        endOrganId: '',
        name: '',
        number: '',
        page: 1,
        pageSize: 10,
        startOrganId: ''
      },
      value: 11,
      value1: 11,
      destination: '',
      selectValue: '',
      treeData: []
    }
  },
  async created() {
    const { data } = await getTree()
    this.treeData = JSON.parse(data)
    this.getList()
  },
  methods: {
    hasValue(row) {
      // this.courier.agentId = row.id
      console.log(row.name)
      this.pageParams.startOrganId = row.id
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    hasValue1(row) {
      // this.courier.agentId = row.id
      this.pageParams.endOrganId = row.id
      console.log(row.name)
      this.destination = row.name
      this.$refs.destination.blur()
    },
    async getList() {
      const res = await getLinePage(this.pageParams)
      console.log(res)
      this.total = +res.data.counts
      // this.pageParams.pageSize = res.data.pageSize
      this.tableData = res.data.items
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getList()
    },
    reset() {
      this.isSearch = true
      this.imgUrl = 'https://slwl-admin.itheima.net/static/img/pic-kong.742d3899.png'
      this.pageParams.startOrganId = ''
      this.pageParams.endOrganId = ''
      this.destination = ''
      this.selectValue = ''
      this.pageParams.name = ''
      this.pageParams.number = ''
      this.getList()
    },
    search() {
      this.getList()
      setTimeout(() => {
        if (!this.tableData.id) {
          this.isSearch = false
          this.imgUrl = 'https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png'
        }
      }, 0)
    }
  }
}
</script>

<style scoped>
.page{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.inputs{
    border-radius: 10px;
    background-color: #fff;
    padding:20px 40px 20px 10px;

}
.table{
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.row{
  display: flex;
  justify-content: space-between;
}
.btn{
  /* width: 460px; */
  margin-left: 140px;
}
.bader{
  border: 1px solid #eef0f6;

}
.nullImg{
  margin-top: 20px;
    width: 25%;
    height: 25%;
}
.nullText{
  display: block;
  margin-bottom: 25px;
}
.tab{
  list-style: none;
  height: 50px;
  background-color: #fff;
  display: flex;
  padding: 0;
}
.tab li{
  line-height: 50px;
  text-align: center;
  width: 100px;
  height: 100%;
}
 .active{
  background-color: #ffeeeb;
  color: #e15536;
}
::v-deep .el-dialog__header{
  background-color: #f3f4f7;
}
</style>

